<script lang="ts" setup>
import { countBy, pairs } from "underscore";
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncselectuserquestion } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { download2 } from "../../../util/code";
import { ALLTYPE } from "@/util/jianchatime";
import { MemberFinishTaskDetail } from "../../../util/type";
const router = useRouter();
const store = useStore(Storekey);
// 当前登录用户
const user = computed(() => {
  return store.state.user;
});
const teamid = computed(() => {
  return user.value?.teamid;
});
const props = defineProps<{
  selectedTask: Studycodemodel.Iteamjob;
  selectedMember: MemberFinishTaskDetail;
  teamjobrelation: Studycodemodel.Iteamjobrelation[];
}>();
// 组装数据 将完成了的题目信息拼接到任务中的题目列表
const tableData = computed(() => {
  const data = props.teamjobrelation.map((e) => {
    const questionDetail =
      userquestion.value.find((uq) => uq.questionid === e.questionid) || {};
    return { ...e, ...questionDetail };
  });
  return data;
});
watch(props, (e) => {
  start();
});

onMounted(() => {
  start();
});
const userquestion = ref<Studycodemodel.Iuserquestion[]>([]);
async function start() {
  const uqId = props.teamjobrelation.map((e) => e.userquestionid);
  await asyncselectuserquestion({
    ID: uqId,
  })
    .then(({ rows }) => {
      userquestion.value = rows;
    })
    .catch((err) => {
      console.log(err);
    });
}

function acgroup(data?: Array<keyof Studycodemodel.IALLTYPE>) {
  if (Array.isArray(data)) {
    const c = countBy(data, (a) => {
      return a;
    });
    return pairs(c);
  }
  return [];
}
</script>

<template>
  <div class="taskItem-container-box">
    <div class="">
      <!-- <el-descriptions :title="props.selectedMember.name" :column="2" size="default">
            </el-descriptions> -->
    </div>
    <div class="">
      <el-table :data="tableData" style="width: 100%">
        <template v-slot:empty>
          <el-empty
            image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png"
          />
        </template>
        <el-table-column prop="questionid" label="题目ID" width="">
          <template #default="{ row }">
            <!-- <router-link v-slot="{ href }" custom :to="{ name: '题目', params: { ID: row.questionid }, }">
                            <el-link target="_blank" :href="href">{{ row.questionid }} </el-link>
                        </router-link> -->
            {{ row.questionid }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="题目名称" width="">
          <template #default="{ row }">
            <!-- <router-link v-slot="{ href }" custom :to="{ name: '题目', params: { ID: row.questionid }, }">
                            <el-link target="_blank" :href="href">{{ row.qName }}
                            </el-link>
                        </router-link> -->
            {{ row.qName }}
          </template>
        </el-table-column>
        <el-table-column prop="ID" label="提交答案">
          <template #default="{ row }">
            <el-button
              v-if="!row?.context"
              disabled
              plain
              type="primary"
              size="default"
            >
              暂未提交
            </el-button>
            <el-button
              v-else
              type="primary"
              plain
              size="default"
              v-show="row.type == '代码'"
              @click="download2(row)"
            >
              查看源码
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="resultdataarr" label="测试点">
          <template #default="{ row }">
            <span v-if="Array.isArray(row.resultdataarr)">
              <span
                :style="{ display: 'inline-block' }"
                v-for="(v, key) in acgroup(row.resultdataarr)"
                :key="'a_' + key"
              >
                <span effect="dark" :class="ALLTYPE[v[0]][1]"
                  >{{ v[0] }}:{{ v[1] }}&nbsp;</span
                >
              </span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped></style>
